<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>首页</title>
		<link href="/ViewMob/css/mui.min.css" rel="stylesheet" />
		<style>
      .list-chart{background: #fff;margin-bottom: 5px;overflow: hidden;}
.list-chart dd{
	float: left;
	width: 25%;
	padding: 5px 0;
	text-align: center;
	font-size: 13px;
}
dt, dd, dl {
    margin: 0 !important;
}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">

			<h1 class="mui-title">设备分析</h1>
		</header>
		
		
		<div class="mui-content">
			<div style="background: #fff;padding-bottom: 15px;margin-bottom: 5px;">
				<div id="main" style="width:100%;height:220px; margin: 0 auto;"></div>
			</div>
			<div class="list-chart">
				<dl>
					<dd>
						辅机名称
					</dd>
					<dd>
						停机次数
					</dd>
					<dd>
						停机时长
					</dd>
					<dd>
						平均停机时长
					</dd>
				</dl>
			</div>
			<div class="list-chart">
				<dl>
					<dd>
						磨煤机
					</dd>
					<dd>
						20次
					</dd>
					<dd>
						1.48h
					</dd>
					<dd>
						21.32h
					</dd>
				</dl>
			</div>
			<div class="list-chart">
				<dl>
					<dd>
						磨煤机
					</dd>
					<dd>
						20次
					</dd>
					<dd>
						1.48h
					</dd>
					<dd>
						21.32h
					</dd>
				</dl>
			</div>
			<div class="list-chart">
				<dl>
					<dd>
						磨煤机
					</dd>
					<dd>
						20次
					</dd>
					<dd>
						1.48h
					</dd>
					<dd>
						21.32h
					</dd>
				</dl>
			</div>
			<div class="list-chart">
				<dl>
					<dd>
						磨煤机
					</dd>
					<dd>
						20次
					</dd>
					<dd>
						1.48h
					</dd>
					<dd>
						21.32h
					</dd>
				</dl>
			</div>
			<div class="list-chart">
				<dl>
					<dd>
						磨煤机
					</dd>
					<dd>
						20次
					</dd>
					<dd>
						1.48h
					</dd>
					<dd>
						21.32h
					</dd>
				</dl>
			</div>
			<div class="list-chart">
				<dl>
					<dd>
						磨煤机
					</dd>
					<dd>
						20次
					</dd>
					<dd>
						1.48h
					</dd>
					<dd>
						21.32h
					</dd>
				</dl>
			</div>
			<div class="list-chart">
				<dl>
					<dd>
						磨煤机
					</dd>
					<dd>
						20次
					</dd>
					<dd>
						1.48h
					</dd>
					<dd>
						21.32h
					</dd>
				</dl>
			</div>
			<div class="list-chart">
				<dl>
					<dd>
						磨煤机
					</dd>
					<dd>
						20次
					</dd>
					<dd>
						1.48h
					</dd>
					<dd>
						21.32h
					</dd>
				</dl>
			</div>

		</div>
		<script src="/ViewMob/js/echarts.js"></script>
		<script type="text/javascript" charset="utf-8">
			//自动轮播
			var myChart = echarts.init(document.getElementById('main'));
			var option = {
				title: {
					text: "",
					subtext: "",
					x: "center"
				},
				tooltip: {
					trigger: "item",
					formatter: "{a} <br/>{b} : {c} ({d}%)"
				},
				legend: {
					x: "center",
					y: "bottom",
					data: ["磨煤机", "送风机", "引风机", "给水泵组", "高压加热器"],
					itemGap: 5,
					sitemHeight: 5,
					itemWidth: 8,
					itemHeight: 8,
					borderWidth: 0,

				},
				series: [{
					name: "设备分析",
					type: "pie",
					radius: ["10%", 60],
					roseType: "area",
					data: [{
						value: 23,
						name: "磨煤机"
					}, {
						value: 11,
						name: "送风机"
					}, {
						value: 15,
						name: "引风机"
					}, {
						value: 20,
						name: "给水泵组"
					}, {
						value: 16,
						name: "高压加热器"
					}],
					startAngle: 67,
					center: ["50%", "50%"]
				}],
				calculable: true
			}
			myChart.setOption(option);
		</script>
	</body>

</html>